<template>
	<view class="module flex_ZC">
		<!-- #ifdef H5 -->
			<uNavbar title="证件管理"> </uNavbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="custom_box">
			<image class="indexbg" :src="baseUrl +'/static/image/indexbg.png'" mode="aspectFill"></image>
			<view :style="{height: statusBarHeight + 'px' }"></view>
			<view class="custom_nav " :style="{height: titleHeight + 'px'}">
				<image class="goback" :src="baseUrl +'/static/icon/i_left.png'" mode="aspectFill" @click="leftClick"></image>
				<text class="f28 c3">证件管理</text>
			</view>
		</view>
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<view class="information_txt flex_Z">
			<text class="f48 c3 fw7">请准备以下证件</text>

			<view class="content flex_ld">
				<view class="  flex_Z">
					<view class="flex_dq">
						<text class="f28 c3 fw5">营业执照</text>
						<!-- <text class="tishi"> *</text> -->
					</view>
					<text class="content_tip">个体工商户执照或企业法人营业执照</text>
				</view>
				<view class="content_r flex_ZC">
					<image :src="baseUrl +'/static/image/example1.png'" mode="aspectFill"></image>
					<text class="f20 c6">示例</text>
				</view>
			</view>

			<view class="content flex_ld">
				<view class="  flex_Z"> 
					<view class="flex_dq">
						<text class="f28 c3 fw5">身份证 </text>
						<!-- <text class="tishi"> *</text> -->
					</view>
					<text class="content_tip">上传法人或实际经营管理人身份证</text>
				</view>
				<view class="content_r flex_ZC">
					<image :src="baseUrl +'/static/image/example2.png'" mode="aspectFill"></image>
					<text class="f20 c6">示例</text>
				</view>
			</view>
			
			<view class="content flex_ld">
				<view class="  flex_Z">
					<view class="flex_dq"> 
						<text class="f28 c3 fw5">行业资质 </text>
						<!-- <text class="tishi"> *</text> -->
					</view>
					<text class="content_tip">某些行业需要上传所需的行业资质</text>
				</view>
				<view class="content_r flex_ZC">
					<image :src="baseUrl +'/static/image/example3.png'" mode="aspectFill"></image>
					<text class="f20 c6">示例</text>
				</view>
			</view>

			<view class="btns flex_ld">
				<text class="sign_out" @click="leftClick">上一步</text>
				<text class="service" @click="nextStep">准备好了，开始提交</text>
			</view>
		</view>
		<view class="empty3"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				titleHeight: 0, // 标题栏高度
				baseUrl: this.$imageBaseUrl,
			}
		},
		onReady() {
			// #ifdef MP-WEIXIN 
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
					console.log(this.statusBarHeight);
				}
			})
			const custombar = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (custombar.top - this.statusBarHeight) * 2 + custombar.height
			console.log(this.titleHeight);
			// #endif

		},
		onLoad() {

		},
		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 下一步
			nextStep(){
				uni.navigateTo({
					url:'/pagesMy/businessJoin/joinApplyTwo'
				})
			}
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 460rpx;
	}

	.custom_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		font-size: 36rpx;
		z-index: 9;
		color: #FFFFFF;
	}

	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
	}

	.information_txt {
		width: 686rpx;
		padding: 16rpx  0;
	}


	.content {
		width: 100%;
		padding: 32rpx 0;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(0,0,0,0.05);
	}

	.content_tip {
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0 20rpx;
	}

	.content_r>image {
		width: 244rpx;
		height: 172rpx;
	}
	.content_r>text{
		margin-top: 10rpx;
	}
	.tishi {
		font-size: 28rpx;
		color: #FA6E01;
		margin-left: 6rpx;
	}


	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}


	/deep/.u-input__content {
		margin-left: -20rpx;
	}
</style>